<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩分析</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; max-width: 1200px; margin: auto; }
        h1, h2, h3 { color: #333; }
        input[type="checkbox"] { margin-right: 5px; }
        button { padding: 8px 16px; background-color: #007bff; color: white; border: none; cursor: pointer; margin-top: 10px; }
        button:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background-color: #f4f4f4; }
        .card { border: 1px solid #ccc; border-radius: 5px; padding: 10px; width: 250px; display: inline-block; margin: 10px; vertical-align: top; }
        .page-break { page-break-after: always; }
        nav a { margin-right: 10px; color: #007bff; text-decoration: none; }
        nav a:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <nav>
        <a href="/">首页</a>
        <a href="/students">学生管理</a>
        <a href="/exams">考试管理</a>
        <a href="/scores">成绩管理</a>
        <a href="/analysis">成绩分析</a>
    </nav>

    <h1>成绩分析</h1>
    <h3>选择要分析的考试:</h3>
    {% for exam in exams %}
    <label>
        <input type="checkbox" name="selectedExams" value="{{ exam.id }}"> {{ exam.name }} ({{ exam.time }})
    </label><br>
    {% endfor %}
    <button onclick="calculateStatistics()">计算统计信息</button>
    <button onclick="generateReport()" style="margin-left: 10px;">生成报告</button>

    <div id="statistics-container"></div>

    <script>
        function calculateStatistics() {
            const selectedExamIds = Array.from(document.querySelectorAll('input[name="selectedExams"]:checked'))
                .map(checkbox => parseInt(checkbox.value));

            fetch('/calculate_statistics', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ selectedExamIds })
            })
            .then(response => response.json())
            .then(stats => {
                const statisticsContainer = document.getElementById('statistics-container');
                let statsHtml = '';

                for (const [examName, examStats] of Object.entries(stats)) {
                    statsHtml += `<h2>${examName}</h2>`;
                    statsHtml += `<p>总人数: ${examStats.total_students}</p>`;
                    statsHtml += '<table>';
                    statsHtml += '<thead><tr><th>科目</th><th>平均分</th><th>最高分</th><th>最低分</th></tr></thead>';
                    statsHtml += '<tbody>';

                    for (const [subject, subjectData] of Object.entries(examStats.subjects)) {
                        statsHtml += `<tr>
                            <td>${subject}</td>
                            <td>${subjectData.average.toFixed(2)}</td>
                            <td>${subjectData.max}</td>
                            <td>${subjectData.min}</td>
                        </tr>`;
                    }

                    statsHtml += '</tbody></table>';
                }

                statisticsContainer.innerHTML = statsHtml;
            });
        }

        function generateReport() {
            const selectedExamIds = Array.from(document.querySelectorAll('input[name="selectedExams"]:checked'))
                .map(checkbox => parseInt(checkbox.value));

            if (selectedExamIds.length === 0) {
                alert('请至少选择一个考试来生成报告');
                return;
            }

            fetch('/generate_report', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ selectedExamIds })
            })
            .then(response => response.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `成绩报告_${new Date().toISOString().split('T')[0]}.xlsx`;
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(url);
            });
        }
    </script>
</body>
</html>